<template>
  <section>
    <div class="container-input">
      <slot name="label"></slot>
      <input class="custom-input" v-model="value" v-bind="$attrs" />
      <slot name="end"></slot>
    </div>
    <p class="custom-error">{{ errorMessage }}</p>
  </section>
</template>

<script setup lang="ts">
import { useField } from 'vee-validate';

const { name } = defineProps({
  name: {
    type: String,
    required: true,
  },
});

const { value, errorMessage } = useField(() => name);
</script>

<style scoped lang="scss">
.container-input {
  // --custom-input-color: #77c9d0c2;
  --custom-error-color: #29211e;

  @apply flex items-center mt-1;
  .custom-input {
    @apply flex-1 px-2 py-1 text-[var(--custom-input-color)] bg-slate-50/45 outline-none duration-300 rounded-sm focus:border-white placeholder:text-xs focus:ring-1 ring-offset-1 ring-[var(--custom-input-color)];
    &::-ms-reveal {
      display: none;
    }
    &::placeholder {
      color: var(--custom-input-color);
      opacity: 0.6;
    }
  }
}
.custom-error {
  mix-blend-mode: difference;
  color: #3f8cb9;
  @apply text-[8px] w-full h-3;
}
</style>
